<template>
    <div class="box">
        <topLogo v-if="isPath" @searchItem="getLogoForm"></topLogo>
        <div class="content">
            <!-- 条件搜索 -->
            <div class="content-top" v-if="isPath">
                <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#f4f4f4"
                text-color="#000"
                active-text-color="#ffd04b">
                <el-submenu index="1">
                    <template slot="title">全部院系</template>
                    <el-menu-item :index="item.navId" v-for="(item, index) in allMajorItems" :key="index">{{item.navigation}}</el-menu-item>
                </el-submenu>
                <el-submenu index="2" v-if="!isPath">
                    <template slot="title">编辑推荐</template>
                    <el-menu-item :index="item" v-for="(item, index) in recommend" :key="index">{{item}}</el-menu-item>
                </el-submenu>
                </el-menu>
            </div>
            <div class="works-title" v-if="!isPath">编辑推荐</div>
            <!-- 内容 -->
            <div class="demo-image">
                <div class="img" :key="index" v-for="(item, index) in dataList">
                    <div @click="goWork(item.navId, item.depFirstId, item.desId, item.id)" style="height:100%">
                        <el-card shadow="hover">
                            <el-image
                            :src="item.cover"
                            fit="fill"></el-image>
                            <span class="demonstration">{{item.title}}</span>
                        </el-card>
                    </div>
                </div>
            </div>
            <div class="foot-page">
                <el-pagination
                small
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[5, 15, 20]"
                :page-size="15"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>
        <Footer v-if="isPath"></Footer>
    </div>
</template>

<script>
import topLogo from '../../components/top-logo.vue'
import Footer from '../../components/footer.vue'
export default {
    components: {
        topLogo,
        Footer
    },
    data() {
        return {
            firstBranch: '',
            secondBranch: '',
            input2: '123',
            currentPage4: 1,
            activeIndex: '1',
            allMajorItems: [],
            recommend: ['最多评论','最多点赞'],
            queryInfo: {
                page: 1,  // 页数
                size: 15, // 条数
            },
            dataList: [],
            total: 0,
            activeKey: null,
            isPath: false
        }
    },
    watch: {
        activeKey(newValue, oldValue) {
            console.log("改变了");
            this.dataList = []
            this.getBranchWork(newValue)
        }
    },
    mounted() {
        // 判断路由，是否显示top-log
        if(this.$route.path === '/works') {
            this.isPath = true
        }
        this.getDataList()
        this.getAllNevagation()
    },
    methods: {
        // 子组件传过来的值
        getLogoForm(item) {
            // console.log(item);
            this.dataList = item
            this.total = item.length
            console.log(this.dataList);
        },
        handleSizeChange(val) {
            this.queryInfo.size = val
            this.getDataList()
        },
        handleCurrentChange(val) {
            this.queryInfo.page = val
            this.getDataList()
        },
        goBack() {
            this.$router.push('/')
        },
        handleSelect(key, keyPath) {
            this.activeKey = key
        },
        getDataList() {
            this.$http.get(this.$api.allList, {params: this.queryInfo})
            .then(res => {
                if(res.data.status === 20000) {
                    // this.dataList = res.data.data.records
                    res.data.data.records.map((value, index) => {
                        if(value.status === 1) {
                            this.dataList.push(value)
                        }
                    })
                    this.total = res.data.data.total
                }else {
                    this.$message.error(res.data.status)
                }
            })
            .catch(error => {
                console.log(error);
            })
        },
        goWork(navId, depFirstId, desId, Id) {
            this.$router.push({
                path: '/computer/branchdetail/workdetail',
                query: {
                    firstId: navId,
                    secondId: depFirstId,
                    desId: desId,
                    workId: Id
                }
            })
        },
        // 获取全部院系列表
        getAllNevagation() {
            this.$http.get(this.$api.secondNavigation)
            .then(res => {
                if(res.data.status === 20000) {
                    this.allMajorItems = res.data.data.navigation
                }
            })
            .catch(error => {
                console.log(error);
            })
        },
        // 获取各个院系的作品
        getBranchWork(branchId) {
            this.$http.get(this.$api.branchList + branchId, {params: this.queryInfo})
            .then(res => {
                if(res.data.status === 20000) {
                    // this.dataList = res.data.data.records
                    res.data.data.records.map((value, index) => {
                        if(value.status === 1) {
                            this.dataList.push(value)
                        }
                    })
                    this.total = res.data.data.total
                }else {
                    console.log(res.data.status);
                }
            })
            .catch(error => {
                console.log(error);
            })
        }
    },
}
</script>

<style lang="less" scoped>
.content {
    margin-top: 17px;
    padding: 0 18px;
    padding-bottom: 20px;
    .content-top {
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: flex-start;  
    }
    .works-title {
        text-align: center;
        color: #1E90FF;
        font-size: 20px;
        padding: 20px 0;
    }
    .demo-image {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        // padding: 0 12px;
        .img {
            flex: 0 0 17%;
            margin-bottom: 20px;
        }
        span {
            display: block;
        }
    }
    .demo-image /deep/ .el-card {
        border: none;
        color: #909399;
    }
    .demo-image /deep/ .el-card__body {
        padding: 0;
    }
} 
.content /deep/ .el-page-header {
    margin-left: 14px;
    margin-bottom: 10px;
}
.foot-page {
    display: flex;
    justify-content: center;
}
.content /deep/ .el-menu--horizontal>.el-submenu .el-submenu__title {
    background-color: white !important;
}
.content-top /deep/ .el-menu.el-menu--horizontal {
    display: flex;
}
.content-top /deep/ .el-input--prefix .el-input__inner {
    border-radius: 20px;
}
.content /deep/ .el-card {
    height: 100%;
}
.content /deep/ .el-card__body {
    display: flex;
    height: 100%;
    flex-flow: column;
}
.content /deep/ .el-image {
    flex: 1;
}
</style>